<!--
* @description 救援通畅
* @author zywu
* @date 2020/12/14 15:26:45
!-->
<template>
	<div class="section section-base section-rescure">
		<div class="font24 colorYellow">
			救援通畅Top
		</div>
		<div>
			<div v-if="allData.length>0" class="page_9_top" :class="{ 'padtop-25p': allData.length<=3}" id="page_11_highEffciency">
				<div class="page_9_ranking_2">
					<div :class="topData[1].orgLogo ? '' : 'hideimg'"><img :src="topData[1].orgLogo || ''" alt="" class="company_logo"></div>
					<div class="font14">{{topData[1].orgName || ''}}</div>
					<div class="font14 colorYellow">{{topData[1] && topData[1].dataStr || ''}}<span class="font12"></span> </div>
					<img src="/ilink-app-h5-zd/static/img/ilink_1578467588948.png" alt="" class="rankingBg">
				</div>
				<div class="page_9_ranking_1">
					<div :class="topData[0].orgLogo ? '' : 'hideimg'"><img :src="topData[0].orgLogo || ''" alt="" class="company_logo"></div>
					<div class="font14">{{topData[0].orgName || ''}}</div>
					<div class="font14 colorYellow">{{topData[0].dataStr || ''}}<span class="font12"></span> </div>
					<img src="/ilink-app-h5-zd/static/img/ilink_1578905971677.png" alt="" class="rankingBg">
				</div>
				<div class="page_9_ranking_3">
					<div :class="topData[2].orgLogo ? '' : 'hideimg'"><img :src="topData[2].orgLogo || ''" alt="" class="company_logo">
					</div>
					<div class="font14">{{topData[2].orgName || ''}}</div>
					<div class="font14 colorYellow">{{topData[2].dataStr || ''}}<span class="font12"></span> </div>
					<img src=" /ilink-app-h5-zd/static/img/ilink_1578467615060.png" alt="" class="rankingBg">
				</div>
			</div>
			<div>
				<ul class="rankingList" id="rankingListEfficiency">
					<li v-for="(n,i) in sliceData" :key="i">
						<div class="flex-start">
							<div class="font14">{{i + 4}}</div>
							<div class="rankingListImgBox "><img :class="sliceData[i].orgLogo ? '' : 'hideimg'" :src="sliceData[i].orgLogo || ''" alt="">
								{{!sliceData[i].orgLogo ? sliceData[i].orgName.substring(0, 1) : ''}}
							</div>
							<div class="font14">{{sliceData[i].orgName || ''}}</div>
						</div>
						<div class="font14 colorYellow">{{sliceData[i].dataStr || ''}}</div>
					</li>
				</ul>
			</div>
			<div class="font12 text-c absoluteText">以消防通道报警时长为依据计算</div>
		</div>
		<div class="font16 colorYellow" id="page_9_text"></div>
	</div>
</template>

<script>
export default {
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {
					joinTime: {},
				}
			},
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			allData: [],
			topData: [],
			sliceData:[]
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.$nextTick(() => {
					this.init()
				})
			}
		},
	},
	methods: {
		init() {
			// this.reportData.openOrgTop={
			// 	dataList:[{
			// 		data: 84.99,
			// 		orgId: 180,
			// 		orgLogo: "/ilink-app-h5-zd/static/img/中科大东校区_1573463976716.png",
			// 		orgName: "东校区"
			// 	}]
			// }
			if(this.reportData.openOrgTop){
				this.allData = this.reportData.openOrgTop.dataList
				this.topData = Array.apply(null, new Array(3)).map((item, index) => {
					return this.allData[index]||{}
				})
				if (this.allData.length > 3) {
					this.sliceData = ([].concat(this.allData)).slice(3)
				}
			}
		},
	},
	mounted() {},
}
</script>